import styles from './ConfigureDeckScreen.module.css';
import Modal from "./Modal";
import Suit from "../types/Suit";
import React, {useCallback, useState} from "react";

export interface ConfigureDeckScreenProps {
    opened: boolean;
    initialCheckedSuits: Suit[];
    onCancel?: () => void,
    onApply?: (checkedSuits: Suit[], shuffle: boolean) => void,
}

export default function ConfigureDeckScreen(props: ConfigureDeckScreenProps) {
    const { opened, initialCheckedSuits, onCancel, onApply } = props;
    const [checkedSuits, setCheckedSuits] = useState<Suit[]>(initialCheckedSuits);
    const [shuffle, setShuffle] = useState(false);

    let onSuitChanged = useCallback((suit: Suit, checked: boolean) => {
        let newCheckedSuits = checked
            ? [...checkedSuits, suit]
            : checkedSuits.filter(s => s !== suit);

        setCheckedSuits(newCheckedSuits);
    }, [checkedSuits]);

    return (
        <Modal opened={opened}>
            <div className={styles.configureDeckScreen}>
                <div className={styles.suits}>
                    {Suit.ALL_SUITS.map(suit => (
                        <div key={suit.code} className={styles.checkboxControl}>
                            <input
                                id={suit.code + '-suit-checkbox'}
                                type='checkbox'
                                className={styles.checkbox}
                                checked={checkedSuits.includes(suit)}
                                onChange={e => onSuitChanged(suit, e.currentTarget.checked)}
                            />
                            <label htmlFor={suit.code + '-suit-checkbox'}>
                                {suit.title}
                            </label>
                        </div>
                    ))}
                </div>
                <div className={styles.checkboxControl}>
                    <input
                        id='shuffle-checkbox'
                        type='checkbox'
                        className={styles.checkbox}
                        checked={shuffle}
                        onChange={e => setShuffle(e.currentTarget.checked)}
                    />
                    <label htmlFor='shuffle-checkbox'>
                        Перемешать
                    </label>
                </div>
                <div className={styles.controls}>
                    <button className={styles.cancelButton} onClick={onCancel}>
                        Отмена
                    </button>
                    <button className={styles.applyButton} onClick={() => onApply?.(checkedSuits, shuffle)}>
                        Применить
                    </button>
                </div>
            </div>
        </Modal>
    );
}